<template>
  <div style="margin:10px;">

    <kv label="目标数据库" class="flow">
      <div style="display: flex;align-items: center;">
        <db-conn :data="$props.data"></db-conn>
      </div>
    </kv>
    <kv class="flow">

      <template #k>
        <div class="k" style="">
          <div>上传文件</div>
        </div>
      </template>
      <el-upload
          ref="upload"
          drag
          v-model:file-list="$data.files"
          :limit="1"
          :on-exceed="handleExceed"
          :auto-upload="false"
          :action="jv.SERVER_HOST + '/dev/es/import/' + $props.data.id"
          :headers="$data.uploadHeaders"
          :data="$data.info"
          :on-success="upload_sucess"
          :on-error="upload_error"
      >
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">
          拖动上传 或 点击上传
        </div>
        <template #tip>
          <div class="el-upload__tip">
            集合名.dat
          </div>
        </template>
      </el-upload>

    </kv>

    <kv>
      <el-button type="primary" style="margin:auto;" @click="ok_click()">确定</el-button>
    </kv>

  </div>
</template>

<style lang="scss" scoped>

::v-deep(.kv) {

  .k {
    width: 180px;
  }

  .v {
    width: 100%;

    > :first-child {
      max-width: unset;
    }
  }
}

</style>
<script setup>
/**
 * Created by CodeGenerator  at 2021-03-15 10:31:23
 */
import {UploadFilled} from '@element-plus/icons-vue'
import dbConn from "../../../component/db-conn.vue"



defineOptions({
  name: "import",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  files:[],
  uploadHeaders:{
    token:""
  },
  info: {
    "table": "",
    "keyName": "id",
    "data": ""
  }
});
const info = $computed(() => $data.info);

const $props = defineProps({
  data: {type: Object}
});


$data.uploadHeaders.authorization = jv.authorization;

const upload = ref();

const handleExceed = (files) => {
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
}


const upload_sucess = () => {
  jv.info("导入成功");
}

const upload_error = () => {
  jv.error("上传失败");
}

const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const ok_click = function () {
//校验
  if (jv.chk_main() == false) {
    return;
  }

  $data.info.connectionUri = $props.data.connectionUri

  if ( !$data.files.length) {
    return jv.error("请上传 json 数据文件");
  }

  upload.value.submit();

};

onMounted(function () {

})


</script>
